<!--
 * @Author: new-wang
 * @Date: 2025-04-10 15:17:45
 * @LastEditors: new-wang
 * @LastEditTime: 2025-05-29 14:32:11
 * @FilePath: \v3bbs\src\components\home\head\HomeHeadMenu.vue
 * @Description:
-->
<template>
  <div class="header-menu-content">
    <!-- :items="menuItems" -->
    <!-- @click="menuClick" -->
    <a-menu class="header-menu" v-model:selectedKeys="current" :mode="collapsed ? 'inline' : 'horizontal'">
      <a-menu-item key="frontPage"> 标签1 </a-menu-item>
      <a-menu-item key="frontPage1"> 标签2 </a-menu-item>
      <a-menu-item key="boilingPoint" v-if="collapsed"> 标签3 </a-menu-item>
      <a-menu-item key="frontPage3"> 标签4 </a-menu-item>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
// import type { MenuProps } from 'ant-design-vue';
import { ref } from 'vue'

// 当前目录
const current = ref<string[]>(['frontPage'])
// const menuClick: MenuProps['onClick'] = item => {
//     console.log('item', item)
// }
const { collapsed } = storeToRefs(useConfigStore())
</script>

<style scoped lang="less">
/* -------- horizontal-start -------- */
// 去掉a-menu组件的下划线
.ant-menu-horizontal {
  border-bottom: 0;
  border: 0 !important;
  line-height: 40px;
}

:deep(.ant-menu-light.ant-menu-horizontal) {
  >.ant-menu-item::after {
    border: 0 !important;
  }

  >.ant-menu-item {
    padding: 0 20px;
    font-size: 15px;
    // color: #333;

    &:hover {
      color: #007fff;
    }

    // &::after {
    //   border: 0 !important;
    // }

    // &.ant-menu-item-selected {
    //   color: #007fff;
    //   font-weight: 500;
    // }
  }
}

/* -------- horizontal-end -------- */
</style>
